<template>
	<view class="content">
		
		<view class="bank_item" v-for="(item,index) in bankdata" :key="index">
			<view class="cardnumber">{{item.cardnumber}}</view>
			<view class="bank_info">
				<view class="bankname">
					<i class="coolc icon-bank"></i><span>{{item.bankname}}</span>
				</view>
				<view class="openbank">{{item.openbank}}</view>
				<view class="openname">{{item.openname}}</view>
			</view>
		</view>
		<button class="cu-btn lg w-100">添加银行卡</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				bankdata: [{
					"cardnumber":"6236692120000705965",
					"bankname": "建设银行",
					"openbank": "江西省 赣州市 兴国支行",
					"openname": "刘熙"
				},
				{
					"cardnumber":"6236692120000705965",
					"bankname": "建设银行",
					"openbank": "江西省 赣州市 兴国支行",
					"openname": "刘熙"
				}]
			}
		}
	}
</script>

<style lang='scss'>
page { background:$bgcolor_white; }
@font-face{ font-family:"farrington"; src:url('/static/public/farrington.ttf'); }
.content { padding:26upx; }
.bank_item {
	width:100%; border:1px solid #eeeeee; border-radius:10upx; padding:20upx 26upx 26upx 26upx; margin-bottom:26upx;
	
	.cardnumber { font-family:"farrington"; color:#8c0027; letter-spacing:8upx; font-size:$font-base; }
	.bank_info {
		width:100%; height:40upx; line-height:40upx;
		.bankname { 
			display:block; float:left; padding-right:20upx;
			.coolc { display:block; float:left; font-size:$font-base; padding-right:10upx; color:#cda400; }
			span { display:block; float:left; font-size:$font-base; color:#cda400; }
		}
		.openbank { display:block; float:left; font-size:$font-base; color:$font-color-ccc; }
		.openname { display:block; float:right; font-size:$font-base; color:$font-color-999; }
	}
}
.w-100 { width:100%; background:$vui_bgcolor; color:$bgcolor_white; }
</style>